<template>
  <div class="app-container" v-loading="loading">

    <div class="receiTop">
      <el-row style="width: 100%;">
        <el-col :span="11">
          <div style="display: flex">
            <div class="ydh">拣货单：</div>
            <el-input v-model="outCode" placeholder="请输入或扫描拣货单号" @keyup.enter="getDetailByCodeList"
                      clearable/>
          </div>
        </el-col>
        <el-col :span="1">

        </el-col>
        <el-col :span="11">
          <div style="display: flex">
            <div class="ydh">SKU编码：</div>
            <el-input v-model="skuCode" ref="skuCodeRef" placeholder="请输入或扫描商品条码"
                      @keyup.enter="getCheckPickPackageAndSku" clearable/>
          </div>
        </el-col>
      </el-row>

    </div>
    <div class="justify-content items-center" style="margin-bottom: 15px">
      <div class="plan">
        <span class="information"></span>
        <span class="informationText">拣货信息</span>
      </div>
    </div>
    <vxe-table
        border
        show-overflow
        style="margin-top: 20px;"
        align="center"
        :data="outOrdertableList"
        height="300"
        :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column type="seq" width="80" title="序号"></vxe-column>
      <vxe-column field="companyName"  width="150" title="公司名称" ></vxe-column>
      <vxe-column field="warehouseName" width="150" title="仓库名称"></vxe-column>
      <vxe-column field="outCode" title="拣货单号"></vxe-column>
      <vxe-column field="pickStatus" title="打包状态">
        <template v-slot="{row}">
          {{ returnDictLabel(pickStatusList, row.pickStatus) }}
        </template>
      </vxe-column>
      <vxe-column field="breedNum" title="应拣货品类"></vxe-column>
      <vxe-column field="outNum" title="应拣货数量"></vxe-column>
      <vxe-column field="scanNum" title="拣货数量">
        <template #default="{row}">
          {{ row.scanNum }}/{{ row.outNum }}
        </template>
      </vxe-column>
    </vxe-table>

    <div class="justify-content items-center" style="margin: 15px 0">
      <div class="plan">
        <span class="information"></span>
        <span class="informationText">商品信息</span>
      </div>
    </div>
    <vxe-table
        border
        show-overflow
        style="margin-top: 20px;"
        align="center"
        :data="goodsTableList"
        height="300"
        :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column type="seq" width="80" title="序号"></vxe-column>
      <vxe-column field="companyName"  width="150" title="公司名称" ></vxe-column>
      <vxe-column field="warehouseName" width="150" title="仓库名称"></vxe-column>
      <vxe-column field="skuCode" title="SKU编码"></vxe-column>
      <vxe-column field="skuName" title="商品名称"></vxe-column>
      <vxe-column field="skuImg" title="商品图片">
        <template #default="{row}">
          <ImagePreview v-if="row.skuImg" :width="150" :height="50" :src="row.skuImg"></ImagePreview>
        </template>
      </vxe-column>
      <vxe-column field="skuCode" title="SKU编码"></vxe-column>
      <vxe-column field="locationCode" title="库位"></vxe-column>
      <vxe-column field="scanNum" title="数量"></vxe-column>
    </vxe-table>

    <!--    打印区域-->
    <div id="printWrap" v-if="isShowPrint">
      <div class="printDiv" id="printDiv" ref="printDiv">
        <div class="printTop">
          <div class="topleft">
            <div style="display: flex">
              <div class="toptext">{{ printData.mailno }}</div>
              <div class="toptext">{{ printData.mailno }}</div>
            </div>
            <div class="topTime">{{ printData.create_time }}</div>
          </div>

        </div>
        <div class="printPosition">
          {{ printData.position }} {{ printData.position_no }}
        </div>
        <div class="printCenter">
          <div class="centerLeft">
            <div class="cenLeftA">
              <svg class="mailNo" style="text-align: center"></svg>
            </div>
            <div class="cenLeftB">
              {{ printData.tp_status }} {{ printData.innerProvinceName }}
            </div>
            <div class="cenLeftC">
              <div class="ctext">交</div>
              <div>{{ printData.package_wdjc }}</div>
            </div>
            <div class="cenLeftD">
              <div class="dshou">收</div>
              <div>
                <div>{{ printData.receiver_name }} {{ printData.receiver_mobile }}</div>
                <div>{{ printData.receiver_area_names }} {{ printData.receiver_address }}</div>
              </div>
            </div>
            <div class="cenLeftE">
              <div class="eji">寄</div>
              <div>
                <div>{{ printData.sender_name }} {{ printData.sender_mobile }}</div>
                <div>{{ printData.sender_area_names }} {{ printData.sender_address }}</div>
              </div>
            </div>
          </div>
          <div class="centerRight">
            <svg class="mailNo" style="text-align: center"></svg>
          </div>
        </div>
        <div class="printBottom">
          <template v-for="(item,index) in printSkuList" :key="index">
            <div>{{ item.locationCode }} {{ item.skuName }} 【{{ item.skuNum }}件】</div>
          </template>
          <div style="text-align: right">已验视</div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import {nextTick, onMounted, ref} from "vue";
import {checkPickPackageAndSku, getKuaidiCreateBmOrder, getPickDetailByCode, getPrintConfigList} from "@/api/scApi";
import ImagePreview from "@/components/ImagePreview/index.vue";
import JsBarcode from 'jsbarcode';
import {getLodop} from "@/assets/LodopFuncs";
import html2canvas from "html2canvas";

let loading = ref(false)
let outCode = ref('') //出库单号
let skuCode = ref('') //SKU编码
let pickStatusList = ref([
  {'label': '未打包', 'value': 0},
  {'label': '未完成', 'value': 1},
  {'label': '已完成', 'value': 2},
])
let outOrdertableList = ref([]) //拣货表格数据
let goodsTableList = ref([])
const {proxy} = getCurrentInstance()
let queryParams = ref({
  pageNum: 1,
  pageSize: 20
})
//根据拣货单号查询拣货详情
let pickDetail = ref({}) //拣货单详情

let LODOP;
onMounted(() => {
  setTimeout(() => {
    LODOP = getLodop();
  }, 500)
  getGoodsTempList()
})

function getDetailByCodeList() {
  loading.value = true
  skuCode.value = ""
  getPickDetailByCode({'outCode': outCode.value}).then(res => {
    loading.value = false
    if (res.code === 200) {
      let data = res.data
      setOutdertableList(data)
      proxy.$refs.skuCodeRef.focus()
    }
  }).finally(() => {
    loading.value = false
  })
}


function setOutdertableList(data) {
  outOrdertableList.value = outOrdertableList.value.filter(item => {
    item.id != data.outId
  })
  outOrdertableList.value.push(data)
  pickDetail.value = data
  goodsTableList.value = data.detailList
}

function getCheckPickPackageAndSku() {
  if (outCode.value) {
    loading.value = true
    checkPickPackageAndSku(
        {
          'skuCode': skuCode.value,
          'pickPackageId': pickDetail.value.pickPackageId
        }
    ).then(res => {
      if (res.code === 200) {
        loading.value = false
        let data = res.data
        setOutdertableList(data)
        if (data.residueNum === 0) {
          proxy.$modal.msgSuccess('商品全部扫描成功，请打包')
          //商品全部扫描成功 清空页面数据
          goodsTableList.value = []
          outOrdertableList.value = []
          pickDetail.value = {}
          outCode.value = ''
          skuCode.value = ''
          // getPrintData(data.outId)  2023-12-08 需求 拣货完成不打印单据
        } else {
          proxy.$modal.msgSuccess('商品扫描成功，剩余商品数量：' + data.residueNum)
        }
      }
    }).finally(() => {
      loading.value = false
    })
  } else {
    proxy.$modal.msgWarning("请先输入拣货单号!")
  }

}

let printData = ref({}) //打印面单数据
let printSkuList = ref([])
let isShowPrint = ref(false)

//加载打印数据
function getPrintData(outId) {

  getKuaidiCreateBmOrder({outId: outId}).then(res => {
    if (res.code === 200) {
      let dataobj = res.data.pdfInfoVo
      isShowPrint.value = true
      printData.value = dataobj
      printSkuList.value = res.data.skuList
      nextTick(() => {
        JsBarcode(".mailNo", dataobj.mailno, {
          width: 1.3,
          height: 20,
          fontSize: '14pt',
          fontOptions: 'bold',
          displayValue: true //是否在条形码下方显示文字
        });

        //打印

        html2canvas(proxy.$refs.printDiv, {
          backgroundColor: null,
        }).then((canvas) => {
          let url = canvas.toDataURL("image/png");

          if (LODOP) {
            LODOP.PRINT_INIT("");
            LODOP.ADD_PRINT_IMAGE(0, 0, "100%", "100%", url);
            LODOP.SET_PRINT_PAGESIZE(1, tempStyle.value.width * 10, tempStyle.value.height * 10)//设置纸张大小
            LODOP.SET_PRINTER_INDEX(printMachine.value) //设置打印机
            LODOP.PRINT();
          }
        })

        setTimeout(() => {
          isShowPrint.value = false
        }, 500)
      })
    }
  })
}

//获取打印模板
let printMachine=ref("")//打印机名称
let tempStyle=ref([])//打印样式 纸张的宽高
function getGoodsTempList() {
  let params = {
    pageSize: 0,
    param: {printType: 4, statusSort: true}
  }
  getPrintConfigList(params).then(res => {
    if (res.code === 200) {
      //设置默认模板 和默认打印机,样式
      printMachine.value = res.data[0].printMachine
      tempStyle.value= res.data[0]
    }
  })

}
</script>

<style scoped lang="scss">
.receiTop {
  display: flex;

  .ydh {
    font-size: 30px;
    font-weight: bold;
    width: 200px;
    line-height: 100px;
  }

  :deep(.el-input__inner) {
    font-size: 24px;
    height: 100px !important;
  }
}

.erpLabel {
  font-size: 24px;
  font-weight: bold;
}

.printDiv {
  margin: 0 auto;
  width: 74mm;
  height: 126mm;
  border: 1px solid black;
  font-family: "黑体", sans-serif;

  .printTop {
    display: flex;
    width: 100%;
    height: 13mm;
    border-bottom: 1px solid black;

    .topleft {
      padding-top: 5mm;
      padding-left: 2mm;
      width: 60mm;

      .toptext {
        width: 30mm;
        height: 4mm;
        font-size: 6pt;
      }

      .topTime {
        width: 42mm;
        height: 5mm;
        font-size: 8pt;
      }
    }

    .topright {
      width: 16mm;
      height: 12mm;
      font-size: 13pt;
      line-height: 12mm;
      text-align: right;
    }
  }

  .printPosition {
    width: 100%;
    height: 10mm;
    font-size: 26pt;
    font-weight: bold;
    text-align: center;
  }

  .printCenter {
    display: flex;
    margin: 0 auto;
    width: 95%;
    height: 58mm;
    border: 1px solid black;

    .centerLeft {
      width: 54mm;
      height: 58mm;
      border-right: 1px solid black;

      .cenLeftA {
        width: 54mm;
        height: 16mm;
        border-bottom: 1px solid black;
      }

      .cenLeftB {
        width: 54mm;
        height: 6mm;
        border-bottom: 1px solid black;
        font-size: 12pt;
      }

      .cenLeftC {
        display: flex;
        width: 54mm;
        height: 6mm;
        border-bottom: 1px solid black;
        font-size: 16pt;
        font-weight: bold;

        .ctext {
          border: 2px solid black;
          font-weight: bold;
        }
      }

      .cenLeftD {
        display: flex;
        width: 54mm;
        height: 20mm;
        border-bottom: 1px solid black;
        font-size: 11pt;

        .dshou {
          width: 6mm;
          height: 6mm;
          border: 2px solid black;
          border-radius: 4mm;
          margin-top: 3mm;
          text-align: center;
        }
      }

      .cenLeftE {
        display: flex;
        width: 54mm;
        height: 10mm;
        font-size: 8pt;

        .eji {
          margin-top: 1mm;
          font-size: 11pt;
          width: 6mm;
          height: 6mm;
          border: 2px solid black;
          border-radius: 4mm;
          text-align: center;
        }
      }
    }

    .centerRight {
      width: 14mm;
      height: 54mm;
      margin-left: 15mm;
      transform: rotate(90deg);
      transform-origin: 0% 0%;
    }
  }

  .printBottom {
    margin: 0 auto;
    width: 95%;
    padding-top: 2mm;
  }
}
</style>
